<template>
  <div class="delivery_detail">
    <el-dialog
      :title="title"
      width="60%"
      :visible.sync="detailDialog"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="table_container">
        <el-table
          border
          v-loading="isLoading"
          max-height="440"
          :data="deliveryDetail">
          <mes-col-comp
            :key="column.prop"
            v-for="column in tableConfig"
            :column="column"
          ></mes-col-comp>
        </el-table>
      </div>
      <div slot="footer" class="mes_btn">
        <el-button @click="detailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableConfig from './deliveryCol'

export default {
  name: 'DeliveryDetail',
  data() {
    return {
      // 清单明细dialog状态
      detailDialog: false,
      tableConfig, // 表格列配置
      // dialog 标题
      title: '',
      // 清单详情加载中
      isLoading: false,
    }
  },
  computed: {
    // 发料明细
    deliveryDetail() {
      let obj = this.$store.state.materialTrack.deliveryDetail
      if (obj.requestInventories || obj.sendInventories) {
        return [...obj.sendInventories, ...obj.requestInventories]
      }
      return []
    },
  },
  methods: {
    // 打开弹框
    openDialog(id, title) {
      if (!id) return
      this.title = title
      this.isLoading = true
      this.detailDialog = true
      this.getMaterialDetail(id)
    },
    // 获取要料清单详情
    getMaterialDetail(id) {
      let postData = {
        method: 'post',
        url: 'a/materialsendinventory/materialSendInventory/findSendInventory',
        data: {
          requestId: id
        },
        module: 'materialTrack',
        state: 'deliveryDetail'
      }
      this.$store.dispatch('saveData', postData).finally(() => {
        this.isLoading = false
      })
    },
  }
}
</script>

<style scoped lang="less">

</style>
